<template>
  <!-- Map 自定义头 -->
  <view class="custom-map-header">
    <view class="tabs">
      <template v-for="v in getTabsData" :key="v.type">
        <view
          :class="['tabs-item', mainType === v.type && 'item-active']"
          @click="mainTypeChange(v.type)"
        >
          {{ v.name }}
        </view>
      </template>
    </view>
    <view style="flex: 1">
      <UniSearchBar
        placeholder="搜索"
        cancelButton="auto"
        radius="30"
        bgColor="#F5F5F5"
        @confirm="confirm"
        @clear="clear"
        @cancel="clear"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ContactsTypeEnum, ViewTypeEnum } from '@/enums/contactsEnum';
  import { computed, type PropType, ref, watch } from 'vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import type { ContactsConfigResult } from '@/api/contactsMap/types';

  function confirm(e: any) {
    emit('searchConfirm', e.value);
  }

  function clear() {
    emit('searchConfirm', '');
  }

  const props = defineProps({
    /** 视图类型 0 列表 1 map */
    viewType: {
      type: Number as PropType<ViewTypeEnum>,
      default: ViewTypeEnum.MAP,
    },
    contactsType: {
      type: Number as PropType<ContactsTypeEnum>,
      default: ContactsTypeEnum.PERSON,
    },
    config: Object as PropType<ContactsConfigResult>,
  });

  const mainType = ref(ContactsTypeEnum.PERSON);
  watch(
    () => props.contactsType,
    (val) => (mainType.value = val),
  );

  const getTabsData = computed(() => {
    if (!props.config) return [];
    const { unitListShow, connectionListShow } = props.config;
    const data = [];

    if (!connectionListShow) {
      data.push({ name: '人脉', type: ContactsTypeEnum.PERSON });
    } else {
      mainType.value = ContactsTypeEnum.COMPANY;
    }

    if (!unitListShow) {
      data.push({ name: '单位', type: ContactsTypeEnum.COMPANY });
    }

    return data;
  });

  const emit = defineEmits<{
    (e: 'viewChange', type: ViewTypeEnum): void;
    (e: 'mainChange', type: ContactsTypeEnum): void;
    (e: 'searchConfirm', type: string): void;
  }>();

  /** 切换视图 */
  function viewChange() {
    emit('viewChange', props.viewType ? ViewTypeEnum.LIST : ViewTypeEnum.MAP);
  }

  /** 切换数据主体 */
  function mainTypeChange(type: ContactsTypeEnum) {
    mainType.value = type;
    emit('mainChange', type);
  }
</script>
<style lang="scss">
  .uni-searchbar__box {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
</style>
<style scoped lang="scss">
  .custom-map-header {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 30rpx;
    // padding-top: 30rpx;
    padding-left: 20rpx;
    .tabs {
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      width: 200rpx;
      margin-right: 20rpx;

      .tabs-item {
        position: relative;
        font-weight: 400;
        // transition: all 0.3s;
        white-space: nowrap;
        font-size: 32rpx;
        color: #333;
        &::before {
          content: '';
          width: 100%;
          height: 4rpx;
          position: absolute;
          left: 0;
          bottom: -4rpx;
          background-color: #2878ff;
          transform: scale(0);
          transition: all 0.3s;
        }
        &.item-active {
          font-weight: bolder;
          font-size: 36rpx;
          color: #333;
          &::before {
            transform: scale(1);
          }
        }
      }
    }
    .toggle-button {
      width: 100rpx;
      text-align: center;
      .ali-icon {
        font-size: 42rpx;
        color: #000;
      }
    }
  }
</style>
